<template>
  <div class="content">
    <el-card class="box-card card_left">
      <div class="flex">
        <img src="../../assets/images/pages/model.png" class="image" />
        <span class="text">模型管理</span>
      </div>
      <el-tree :data="treedata" :props="defaultProps" @node-click="handleNodeClick" :render-content="renderContent" node-key="id" :default-expanded-keys="expandKey"></el-tree>
    </el-card>
    <el-card class="box-card card_right">
        <!--桥联 -->
        <bridgeLink v-if="type === 'bridge_link_model'" :ownId="ownId" :pId="id" @setChange="setChange"></bridgeLink>
        <!--桥梁截面 -->
        <sectionManagement v-if="type === 'bridge_section_model'" :ownId="ownId" :sectionId="id"></sectionManagement>

        <bridgeBIMComponent v-if= "type=== 'bridge_bim_model'" :bridgeId="ownId" />
        <!-- 桥梁卡片-->
        <bridgecard v-if="type === 'bridge_card_model' || type === 'link_card_information'" :ownId="ownId" :cardId="id" :pId="pId"></bridgecard>
        <!-- 桥梁结构-->
      <bridgeComponent v-if="type === 'bridge_construction_information'" :ownId="bridgeId" :structureId="id" :structureModelId="pId"></bridgeComponent>
      <bridgeStructure v-if="type === 'construction_superstructure_model' || type === 'construction_substructure_model' || type === 'construction_bridge_floor_model'" :structureModelId="id"></bridgeStructure>
      <!-- 桥梁立面-->
      <AddSite v-if="type === 'bridge_facade_model'" :ownId="bridgeId" :facadeId="id"></AddSite>
      <!-- 桥梁详情-->
      <bridgeInfoDetail v-if="type === 'own' || type === 'bridge_construction_model' || type === 'bridge_link_information'" :detail="detail"></bridgeInfoDetail>
    </el-card>
  </div>
</template>

<script>
import bridgeComponent from './components/bridgeComponent'
import bridgeLink from './components/bridgeLink'
import bridgeBIMComponent from './components/bridgeBIMComponent'
import sectionManagement from './components/sectionManagement'
import bridgecard from "./components/bridgecard";
import AddSite from './components/addSite'
import bridgeStructure from './components/bridgeStructure'
import bridgeInfoDetail from './components/bridgeInfoDetail'
export default {
  components: {
    bridgeComponent,
    AddSite,
    bridgeLink,
    sectionManagement,
    bridgecard,
    bridgeStructure,
    bridgeInfoDetail,
    bridgeBIMComponent
  },
  data() {
    return {
        bridgeId: '',
        detail: {},
      treedata: [],
      expandKey: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      ownId:'',
      id: '',
      pId: '',
      type:'own'
    };
  },
  created() {
      this.bridgeId = this.$route.query.id
      this.detail = this.$route.query.detail
      this.queryBridgeModelTreeById()
  },
  watch: {
    "$route.query": {
      handler(val, old) {
        if (val.id) {
            this.bridgeId = this.$route.query.id
            this.detail = this.$route.query.detail
            this.type = 'own'
      this.queryBridgeModelTreeById()
        }
      }
    }
  },
  methods: {
    // 树查询
    queryBridgeModelTreeById() {
        let data = {
            bridgeId: this.bridgeId,
            pId: '-1'
        }
        this.$api.bridge.queryBridgeModelTreeById(data).then(res => {
            if(res.data.success) {
              let arr = []
              arr.push(res.data.data)
              this.treedata = arr
              this.expandKey.push(arr[0].id)
            }
        })

    },
    renderContent(node,data,store) {
        return (
            <span>{data.data.name}</span>
        )
    },
    //   树
    handleNodeClick(data,node) {
      this.ownId = data.ownId
      this.pId = data.pId
      this.id = data.id
      this.type = data.type
    },
    setChange(){
      this.queryBridgeModelTreeById()
    },
  },
};
</script>

<style lang="scss" scoped>
.card_left {
    .flex{
        display: flex;
        align-items: center;
        margin-bottom:10px;
        .image{
            width:20px;
            height:20px;
        }
        .text {
            font-size: 16px;
            color: #327BDC;
            margin-left:4px;
        }
    }
}

.card_right {
  .el-row {
    margin-bottom: 20px;

    .el-col-12 {
      text-align: right;
    }
  }

  .page {
    margin-top: 20px;
    text-align: center;
  }
}
</style>